<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<pre>
			router-link标签相当于a  to属性的值相当于href
			router-view所有路由的出口   声明式导航
			this.$router.push  编程式导航
		</pre>
		<div id="app">
			<App />
		</div>
		
		
		<!--1.引入vue模块-->
		<script src="../node_modules/vue/dist/vue.js"></script>
		<!--2.引入vue-router模块-->
		<script src="../node_modules/vue-router/dist/vue-router.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//3.vue使用VurRouter
			//全局vue组件可省略，因为在vue-router源码中已经有该代码
			//Vue.use(VueRouter);//VueRouter为vue-router暴露出的实例，
			
			let Login = {
				template: '<p>登陆组件</p>'
			}
			let Register = {
				template: '<p>注册组件</p>'
			}
			//4.创建router实例
			let router = new VueRouter({
				//5.配置路由对象(路由匹配规则的集合)
				routes: [{
					path: '/login',
					component: Login
				},{
					path: '/register',
					component: Register
				}]
			})
			
			let App = {
				template:`
				<div>
					<router-link to="/login">点击登陆</router-link>
					<router-link to="/register">点击注册</router-link>
					<router-view></router-view>
				</div>
				`
			}
			let vm = new Vue({
				el: '#app',
				components: {App},
				//6.交给vue实例化对象管理
				router,
				data(){
					return {
						name: 'zqf'
					}
				},
				//路由监听
				watch: {
					//1.路由监听
					/*$route(to, from){
						console.log(to, from)
					},*/
					//2.深度监听
					/*$route: {
						deep: true,
						handler(to, from){
							console.log(to, from)
						},
					},*/
					//3.监听变化时执行方法
					'$route': 'getPath',
				},
				methods:{
					getPath(){
						console.log(this.$route.path)
					},
				},
			})
		</script>
	</body>
</html>
